<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .left img{
        width: 100px;
        height: 100px;
      }
      #app{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .after{
        display: flex;
      }
    
      
      .left{
        display: flex;
        flex-direction: column;
    align-items: center;
      }
      .bu{
        color: cornflowerblue;
      }
      
    </style>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4610036_05ikgva9g39f.css">
</head>
<body>
<div id="app">
    <button @click="login=!login">登录</button>

        <div class="after" v-if="login===true">

            <div class="left">
                <p>扫描二维码登录</p>
                <img :src="down" @mouseover="down='./下载.png'" @mouseout="down='./qr-tips.74063ae1.png'">
                <p>请使用bilibili客户端登录</p>
                <p>扫码登录或者下载APP登录</p>
            </div>

            <div class="right">
              <div>
                <div><span @click="md=1,bu=0" :class="{'bu':bu===0}">密码登录</span>&nbsp;|
                <span @click="md=2,bu=1"  :class="{'bu':bu===1}">短信登录</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span @click="login=!login">x</span>
              </div>
              </div>
                <div v-if="md===1">
                  账号<input type="text"><br>
                  密码<input :type="hiden===true?'password':'text'"><button @mousedown="hiden=!hiden" @mouseup="hiden=true">查看密码</button>
                </div>
                <div v-if="md===2">
                  <span @click="over=!over">{{select}}
                    <div v-show="over" v-for="(item,index) in op" @click="select=item">{{item}}</div>
                  </span><input type="number"><br>
                  密码<input :type="hiden===true?'password':'text'" ><button @mousedown="hiden=!hiden" @mouseup="hiden=true">查看密码</button><br>
                </div>
                  <div>其他方式登录</div>
                  <div>
                    <svg t="1723986746067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3635" width="40" height="40"><path d="M1010.8 628c0-141.2-141.3-256.2-299.9-256.2-168 0-300.3 115.1-300.3 256.2 0 141.4 132.3 256.2 300.3 256.2 35.2 0 70.7-8.9 106-17.7l96.8 53-26.6-88.2c70.9-53.2 123.7-123.7 123.7-203.3zM618 588.8c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40c0 22-17.9 40-40 40z m194.3-0.3c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z" fill="#00C800" p-id="3636"></path><path d="M366.3 106.9c-194.1 0-353.1 132.3-353.1 300.3 0 97 52.9 176.6 141.3 238.4l-35.3 106.2 123.4-61.9c44.2 8.7 79.6 17.7 123.7 17.7 11.1 0 22.1-0.5 33-1.4-6.9-23.6-10.9-48.3-10.9-74 0-154.3 132.5-279.5 300.2-279.5 11.5 0 22.8 0.8 34 2.1C692 212.6 539.9 106.9 366.3 106.9zM247.7 349.2c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z m246.6 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" fill="#00C800" p-id="3637"></path></svg>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <svg t="1723986855380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3951" width="40" height="40"><path d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0" fill="#06B4FD" p-id="3952"></path></svg>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <svg t="1723986901184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4108" width="40" height="40"><path d="M381.3 30.42a227.78 227.78 0 0 1 60.51-13.11c21.19 31.26 28.24 69.08 39.33 104.88 7.57 39.33 13.62 78.66 14.63 118.5 5 27.73 2 55.46 3 83.7 1.52 25.21-2 50.43-1 76.14 1 35.3-4 70.6-3.53 106.4-5 22.69-1 46.39-8.06 68.58-8.58-4.54-12.61-13.62-18.16-21.18-39.83-59-76.64-119.51-110.93-181.53-32.78-65.55-67.57-133.63-70.6-208.25-2.49-59 39.35-115.48 94.81-134.13z m207.25-10.09c5-3 10.59 0.5 16.13 1 27.23 6.05 56.48 10.08 79.68 27.73 21.68 18.16 41.85 39.84 49.92 67.57 11.59 33.28 7.06 69.59 0 103.37-10.09 42.86-29.25 83.2-48.41 123-6 12.1-14.62 23.2-20.17 35.8-11.09 24.71-25.72 47.9-39.84 70.6-22.18 38.32-46.89 74.62-71.1 111.44-3.53 4-8.06 14.11-14.11 7.56-4-40.85-7.06-81.19-8.58-122-5.54-51.94-2.52-104.38-3-156.82 3.53-34.79 4-69.59 8.07-103.88 8.06-40.84 13.61-82.19 26.22-122 9.07-13.62 10.59-33.79 25.21-43.37z m-421 131.11c5.55-2.53 8.07 4.53 11.6 7.56a2305.54 2305.54 0 0 1 251.06 402.39c5.55 11.6 12.61 23.19 13.62 36.31-12.61-3-23.2-9.59-34.79-15.13a2115.66 2115.66 0 0 1-188.59-107.91c-22.69-16.14-45.89-31.77-66.06-50.93-40.34-28.24-68.07-76.14-64.54-126.06 4-57.49 39.83-105.89 77.65-146.23z m687.8-0.51h8.06c18.16 23.7 39.34 45.89 52.45 73.12C929.93 248.76 937 277 939 305.23c-1.51 31.26-11.6 63.54-32.27 87.74-13.61 12.1-24.2 26.73-38.32 37.31-75.14 59.51-159.85 105.9-245.07 150.27-12.6 6.56-24.71 15.63-38.83 17.15 2.53-17.65 13.12-31.77 20.17-47.91a2240 2240 0 0 1 201.2-331.29c15.63-22.69 33.78-44.37 49.42-67.57z m-833 265.24c2-4 1.51-11.1 7.06-12.11 10.08 2 18.65 8.58 27.73 13.62 120.52 65.55 240.53 132.62 356 206.74 4 2 6.05 6.05 7.56 10.59-76.14 1-152.28 1-227.92 0.5-45.88 0.51-89.75-20.67-122-52.44C43 552.82 21.77 514.49 19.25 472.64c0-18.66-2-37.82 3-56.47z m957.57-3.53c7.56-4.54 15.12-9.08 24.2-8.07 1.51 17.65 5 35.3 5.55 52.94-3 21.69-2.52 44.38-12.11 64.55-8.06 17.65-16.13 35.8-30.25 49.41-15.13 14.12-27.73 31.27-46.9 40.34-21.17 16.14-48.4 21.18-74.62 22.7-79.68 0.5-159.85 0.5-239.52 0 2-4 4-7.57 8.07-9.59 118.49-76.14 242-144.71 365.58-212.28zM192.71 667.79c42.87-4.54 86.23-0.51 129.09-5.55 30.76-1 61.52-2.52 91.77 0-8.06 13.11-22.69 19.16-34.28 27.73a721.31 721.31 0 0 1-102.37 61c-35.29 17.65-79.67 11.09-109.92-13.62-24.71-17.14-41.86-41.85-58-66.56 27.73-3.53 56-1 83.7-3z m421.05-5.55c30.26-2 61-1 91.77 0.5 41.35 4.54 83.71 0.51 125.06 5 29.24 2.52 58.49 0 87.74 3.53-10.09 21.17-25.72 39.33-42.86 55.46-26.22 27.27-66.56 40.9-103.37 32.83-32.28-10.09-60.51-30.26-89.26-46.9-15.63-9.58-30.25-20.17-45.88-30.25-8.58-6-17.65-11.6-23.2-20.17z" fill="#C71F1E" p-id="4109"></path><path d="M18.75 846.29c12.1 0.5 23.7 0.5 35.8 0 0 21.18-1 42.86 0.5 64.54 26.73 1 54 1 81.19 0 1.51-21.18 0.5-42.86 0.5-64 12.1 0.51 23.7 0.51 35.8 0q-0.75 78.68 0 157.33h-35.8c0-21.68 1-42.86-0.5-64.54-26.73-1-54-1-81.19 0-1 21.68-0.5 42.86-0.5 64.54h-35.8c0.5-53 0.5-105.39 0-157.83z m182.54 0c12.1 0.5 23.7 0.5 35.8 0 1 33.78-0.51 67.57 0.5 101.86 0 16.64 13.11 33.78 30.76 33.78 17.65 3 42.86-2 46.9-22.69 1.51-37.31 0.5-75.13 0.5-113 12.1 0.5 23.7 0.5 35.8 0 0.51 33.78 0.51 67.57 0.51 101.35-0.51 13.11 0 28.75-10.59 38.33-19.16 18.65-47.4 21.18-72.61 19.66-15.64-1.51-33.28-2-45.89-12.6a49 49 0 0 1-20.68-41.86c-1-34.79 0-69.58-1-104.88z m232 0h38.83c4.54 17.14 15.13 31.26 20.67 47.9 14.12 22.69 19.67 49.42 34.29 71.61 6.05 12.1 11.6 24.2 15.13 37.82-12.1 0-24.21 1-36.31-0.51-8.07-10.59-10.08-24.71-17.14-35.8a336.18 336.18 0 0 0-74.63 0.5c-6.05 11.6-10.09 24.71-17.65 35.81-11.09 1-22.19 0.5-33.28 0.5 1-15.13 8.57-27.73 16.14-39.84 7.56-19.16 17.14-37.31 24.2-56.47 13.61-18.66 17.65-41.85 29.75-61.52z m-7.56 90.76a108.52 108.52 0 0 0 50.93 0c-8.66-19.16-14.66-38.82-25.77-56.47-11.6 17.14-16.64 37.82-25.21 56.47zM524 846.29h39.33c3 15.13 6.55 30.25 12.6 44.37 9.58 24.71 13.11 50.93 23.7 75.14l4.54-1.52c4-32.77 19.67-63 23.7-95.3a159.57 159.57 0 0 1 6.56-22.19h42.87c9.58 31.27 21.18 61.52 28.74 93.29 3 9.58 4 21.18 13.11 26.73 8.07-40.34 24.71-78.67 34.79-118.5 12.1-3 25.21-0.51 38.33-1.52-18.16 52.45-36.81 104.38-54 157.33-14.12 0-28.24 1-42.36 0-4.53-2.52-4.53-8.57-6.05-12.61-11.09-33.28-18.65-68.07-32.77-99.84-5 9.08-6.56 19.16-9.08 28.74-7.56 27.74-15.63 55.47-22.69 83.21-14.62 0.5-28.74 0.5-43.37 0-12.1-20.17-14.12-44.38-25.71-64.55-10.59-26.72-16.64-56-30.26-81.18a31.36 31.36 0 0 1-2-11.6zM818.49 867a46.9 46.9 0 0 1 38.82-20.17c27.74-0.5 55 0 82.7-0.5v28.24c-23.7-0.51-47.4-1-71.1 0-17.65 2-28.74 18.65-29.75 35.8 33.28 2 67.07 0.5 100.85 0.5v28.24c-32.78-0.5-66.06-1-98.83 0-4 16.14 5 33.28 21.68 37.32 25.72 4.53 51.43 1 77.15 2.52v24.71c-27.73 0-55 0.5-82.7 0a63.87 63.87 0 0 1-55-49.42c-5-29.75-4-63.54 16.14-87.24z m154.3-17.64a100.14 100.14 0 0 1 36.81-0.51c2 29.25 0.5 58.49 1 87.74-0.51 22.69 1.51 45.38-1.52 67.57h-36.3c0.51-51.98 0.51-103.41 0.01-154.84z" p-id="4110"></path></svg>
                  </div>



                </div>
                <div v-if="hiden==true">
                  <img src="./22_close.9382a5a8.png">
                  <img src="./33_close.a8c18fc8.png">
                </div>
                <div v-else="hiden==false">
                  <img src="./22_open.4ea5f239.png">
                  <img src="./33_open.f7d7f655.png">
                </div>
         
        </div>
       
        


</div>



    <script src="./vue.js"></script>
    <script>
        const {createApp,ref} = Vue
       const app = createApp({
            setup(){
             let login=ref(false)
             let down=ref("./下载.png")
             let md=ref(1)
             let hiden=ref(true)
              let bu=ref(0)
          let select=ref('+86')
          let op=ref(['+23','+45','+10'])
              let over=ref(false)
            
                return{
                  login,
                  down,
                  md,
                  hiden,
                  bu,
                  op,
                  select,
                  over,
                  
                 
                }
            }
        
        }).mount('#app')
    </script>
</body>
</html>